<template>
    <div>
        <div>
            <Carousel />
        </div>
        <div class="search">
            <Search />
        </div>
        <div class="hospital">
            <el-row :gutter="0">
                <el-col :span="20">
                    <p class="title">医院</p>
                    <Level />
                    <Region />
                    <div class="cardList">
                        <div class="card" v-for="(item,_index) in hospitalList" :key="item.id" >
                            <Card :hospitalInfo="item"  />
                        </div>
                    </div>
                    <div class="pagination">
                        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                            :page-sizes="[10, 20, 30, 40]" :size="size" :disabled="disabled"
                            :background="background" layout="jumper,prev, pager, next,sizes,total " :total="hospitalTotal"
                            @change="changePage" />
                    </div>
                </el-col>
                <el-col :span="4">
                    456
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script lang="ts" setup>
import Carousel from './carousel/index.vue'
import Search from './search/index.vue'
import Level from './level/index.vue'
import Region from './region/index.vue'
import Card from './card/index.vue'

import { ref,onMounted } from 'vue'
import { getHospitalListApi } from '@/api/home'

import type { ComponentSize } from 'element-plus'
// 引入医院列表类型
import type {Content} from '@/api/home/type.ts'


const currentPage = ref(1) //当前分页器页码
const pageSize = ref(20) //当前分页器每页条目个数
const size = ref<ComponentSize>('default') // 分页大小
const disabled = ref(false) //是否禁用分页
const background = ref(true) //分页按钮背景色

const hospitalTotal = ref(0)
const hospitalList = ref<Content[]>([])

 onMounted(async () => {
    await getHospitalList(currentPage.value,pageSize.value)
})

// 点击分页器时触发的方法
const changePage = async () => {
    await getHospitalList(currentPage.value,pageSize.value)    
}

// 得到医院列表的方法
const getHospitalList = async(page:number,limit:number) => {
  const res = await getHospitalListApi(page,limit)

   hospitalList.value = res.data.content
   hospitalTotal.value= res.data.totalElements
}

</script>

<style lang="scss" scoped>
.search {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 70px;
    // background-color: pink;
}

.hospital {
    width: 100%;

    // height: 200px;
    // background-color: pink;
    .title {
        color: #7f7f7f;
        font-weight: 600;
    }

    .cardList {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
        margin-top: 10px;
        width: 100%;

        // background-color: pink;
        .card {
            margin: 10px auto;
            width: 48%;
            height: 85px;
        }
    }

    .pagination {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }
}
</style>